Bug 44110
| Summary: | Transitions paired with relative position causes a content flash | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Wes Baker <wcbaker> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED DUPLICATE | ||
| Severity: | Minor | CC: | simon.fraser, wcbaker |
| Priority: | P3 | ||
| Version: | 528+ (Nightly build) | ||
| Hardware: | Mac (Intel) | ||
| OS: | OS X 10.6 | ||
| URL: | http://nwhsu.insidenewcity.com/test.html | ||
Wes Baker
When I hover over an item that has a CSS transition, it's parent's siblings flash. The siblings and the parent all have relative positioning and z-indicies. This bug is hard to reproduce, but it's definitely there.
Here are the conditions:
- Container (header) holding transitioned item is positioned relative and has a z-index of 100
- Container (nav-main) below header is positioned relative and has a z-index of 500
- Container (content) below nav-main is positioned relative and has a z-index of 100
- Nav-main has a form with a <input type="submit"> with image replacement (background + text-indent: -9999px, etc)
Replacing the <input type="submit"> with an <input type="image"> seems to fix things.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Wes Baker
This is happening in Safari 5.01 and the Webkit Nightly.
Simon Fraser (smfr)
Your Go button has text-indent: -9999px, which forces tiled layers. You should set overflow:hidden on that element.
*** This bug has been marked as a duplicate of bug 47175 ***