This quick post is to point out a fix to an issue I had to deal with a few weeks ago and was caused by a Chrome update. Components with absolute positioning and a 2D CSS transform started flickering when placed inside a scrollable component. A brief search online revealed several people with similar problems, but the suggested fixes were all very different. I tested several of them (including obvious changes to the z order) before finding the one that actually did the trick. What eventually worked for me was adding an empty 3D transform to the same elements with 2D transforms: transform:translate3d(0,0,0); I guess the reason why this works is that it forces elements to be drawn via a different rendering / compositing path than standard 2D elements.
This post will hopefully help people avoid a mistake that cost me several hours of debugging. In one of my projects I have been working with OpenGL 4 double precision vertex buffers. As the buffer data was passed to the shader as a generic attribute, I have been using glVertexAttribPointer to specify the attribute location in the data stream. This worked fine with floating point data. When I needed to switch to double precision, I checked the glVertexAttribPointer specification: this function accepts GL_DOUBLE as an input type: therefore, I assumed that change was all I needed to pass double precision data to my shader. I noticed two other version of the attrib pointer function existed ( glVertexAttribIPointer and glVertexAttribLPointer ) but I thought they were just legacy functions or alternatives to using glVertexAttribPointer with GL_DOUBLE or GL_INT type specifiers. Things did not work as I expected. trying to pass double precision data to the shader cau...
One common way to organize React render methods is to split the returned JSX into several smaller pieces, which are then assembled in the final JSX before returning. This makes the overall structure of the render function easier to understand. Note that the objective isn't to obtain JSX fragments we can reuse elsewhere, we just want our JSX to be split into bite-size, one-off sections that have a clear function in the component markup. Now, look at the two examples of a simple render method below. Which one would you use? Both approaches yield the same result and you would be tempted to use stateless components here, as the resulting all-JSX return statement looks better. But using stateless components defined inside your render method is a big no-no. Why? Because they will be re-rendered to the DOM from scratch every time the parent container renders. Keep in mind how reconciliation works. It will traverse your JSX tree, adding and removing nodes as needed. If a component in...
Comments