- This topic is empty.
-
AuthorPosts
-
November 6, 2013 at 8:26 am #155328simplybikesParticipant
Hi all…below is a link to a test page I’ve put together to try out a responsive grid. All works perfectly well in all browsers however when it comes to Safari all is not well. What happens is that when you resize / scale the page down the slider resizes, all fine and dandy. The issue is that when you scale the page back up the slider does not scale back up, it remains at the smaller size until you refresh the page. I’m baffled by this as it works on FF, Chrome, Opera, IE 9+. For the mobile version I’ve removed the slider completely so no issues there.
Anybody any clues.
http://www.nscom.ie/ResponsiveTestSite
Many thanks,
Ian.
November 6, 2013 at 8:34 am #155329Paulie_DMemberWhich version of Safari?
November 6, 2013 at 8:53 am #155333simplybikesParticipantHi Paulie_D…the version on my laptop where this is happening is 5.1.7. It also happens on my desktop which may have a slightly newer version.
Ian
November 6, 2013 at 9:00 am #155334Paulie_DMemberHmm…I suspect that this is going to be somewhere in the JS.
Of course, this might be a solution looking for a problem since the only people who actively resize are developers.
November 6, 2013 at 9:02 am #155335simplybikesParticipantI sort of thought the same thing. How many users go around resizing the page up and down. I might just be creating a problem.
November 6, 2013 at 9:10 am #155337Paulie_DMemberWell, I wouldn’t quote go that far.
Users on mobile devices so, sort of, resize when they change orientation from portrait to landscape and vice versa but the question you need to answer for yourself is “are they losing anything because the slider isn’t exactly right”.
Then you have to weigh that against how much time you are willing to spend on tracking down exactly what the problem is…and balance that against the relatively small subset of users it will affect.
November 7, 2013 at 2:24 am #155365paulobParticipantHI,
There is a bug in safari with various elements such as display:table, inline-blocks and occasionally floats.
You will need to test this has no other adverse effects but the following seems to fix it when using the inspector.:
.col.slider{float:none}
November 7, 2013 at 9:22 am #155388simplybikesParticipantHi paulob….many thanks for that, I’ll give it a rattle and see what happens. How did you find that?
November 7, 2013 at 11:16 am #155394paulobParticipantHow did you find that?
I knew about the bug as I’ve seen it before and it was a matter of poking about in your code with the inspector and testing out any suitable elements.
I can’t guarantee it will work as changing code live doesn’t always give the same result as when it’s in the page from the beginning. But it’s worth a try.
November 11, 2013 at 3:12 am #155670simplybikesParticipantHi paulob….been away for a few days so just put in your suggested fix for this issue. Well you were spot on – it works, bloody brilliant. My sincerest thanks for that.
If you get the chance could you advise me on a separate issue. The test page doesn’t work in IE8. It’s not responsive (media queries do not work) and the menu is crocked.
If you have any suggestions they would be appreciated. Once I get this test page fully working I’ll be able to sleep at night!My thanks again.
November 11, 2013 at 3:50 am #155672paulobParticipantHi,
I assume you have enabled media query support in IE8 as it doesn’t understand it natively.
http://code.google.com/p/css3-mediaqueries-js/
I didn’t see it in your code and modernizr only detects for media query support I believe. It doesn’t add it.
November 11, 2013 at 4:14 am #155674simplybikesParticipantMany thanks for that paulob.
November 11, 2013 at 7:35 am #155682simplybikesParticipantThat works a treat paulob – once again many thanks.
Bit of a learning curve happening with the entire responsive think so your help
is greatly appreciated. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.