Hello everyone,
Safari (6.02) appears to have an issue with resizing an image in a
floated list after encountering a media query breakpoint.
Test case here:
http://www.joergen-lang.de/testing/resize.html
(see below for code)
When I reduce the window width the images scales down properly.
When I enlarge the width the image only scales up to the width set in
the media query. To fill the entire width I have to reload.
The problem goes away when there are:
- no floats involved
- no rules in the media queriy
- I use 'width' instead of 'max-width' in the media query
I tried to replicate the problem in a recent Chrome and Firefox. No
problems there. I suspect this to be Safari (6.02?) specific.
Any hints, ideas, workarounds welcome.
Jørgen Lang
HTML:
<ul id="slideshow" class="cycle-slideshow">
<li><img src="image.jpg" alt="slide" /></li>
</ul>
CSS:
#slideshow {
float: left;
}
#slideshow li > img {
width: 100%;
max-width: 100%;
}
@media screen and ( max-width: 1050px ) {
/* empty rule is enough to trigger the issue */
body {}
}
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
