I’ve got some white text over a box filled with a tiled translucent black .png. When I drag the browser window to a smaller size the white text appears to pop behind the translucent black object.
I’ve got some white text over a box filled with a tiled translucent black .png
Why not put the text within the box filled with a tiled translucent black .png?
Its not going behind - it is spilling over.
You can see this if you view using Safari. Under the View Menu enable Zoom Text Only. Now bump the text size up by using Cmd+ A couple of times will do it.
It still goes dark when I drag the window to a narrower size
I think that this is actually to do with Webkit and rendering with a Hype instance on the page.
There has been mention of a similar effect happening on other sites - my apologies because I didn’t realise that was your specific problem.
I believe there is a rendering bug in Webkit affecting anti-aliasing that is more evident when there are HTML5 animations on the page - but I may be misremembering.
One of the reasons this may happen is because when an object is even a tiny bit transparent, it engages the video card in a different manner than if it is fully opaque. When you have objects in the same reference frame that are composed in different video modes, they don’t always blend the right way. The trick I have always used is to set everything to a very-slightly-not-opaque value, which brings everything into the same frame of reference.
* { opacity: 0.9999998 }
See if that helps (obviously, wrap it in a style tag and put it in the HEAD of your page).
Walter
On May 31, 2013, at 8:47 AM, Trey Yancy wrote:
I checked with Firefox and things are working properly. I have another page with a similar object but without HTML5 and it works properly in Safari.
I disabled Webkit and reoutput the animations but the problem persists.
I hope my version of Safari is not screwed up. If I zoom the text one step (cmd-=) or make the browser window too narrow the white text in the translucent black box thins and looks darker.