Jump to content

Archived

This topic is now archived and is closed to further replies.

jamieg270

Weird resizing in Safari 6, Mountain Lion

Recommended Posts

jamieg270

This is a strange one and I am finding it difficult to ascertain the cause of the problem.

 

I have a website in development at http://vip.cypher-design.net/site

 

This is in development so there are elements not added and CSS that needs to be written so ignore any positional errors for now (like the background slider text becoming offset out of the viewport etc.).

 

I have used FlexSlider to create background images as a slider and I have added the jQuery framework Skrllr for some paralax animation on the slides caption element.

 

In Safari 6 in Mountain Lion, when I resize the browser window to be narrow and then wider the content is stretched and distorted. This will remain like that until I click anywhere in the viewport at which point the content reverts back to the width it should be. Sometimes if I wait long enough it reverts itself. Once this has corrected itself all behaviour is normal as you would expect even if I resize the browser window again.

 

My testing has shown this occurs only in Safari 6 in Mountain Lion (it does occur in Lion, but self corrects almost immediately, so I have a brief flash of stretched content, then it reverts to the correct size).

 

Firefox and Chrome are fine as are IE9 and 10 al works as I would expect (I've got my work cut out for me on IE8 heh! so not tested that as yet!!)

 

I've set debug to true but nothing is showing there.

 

I've identified it has something to do with Flexslider as the problem disappears when I disable the plugin. So I'm thinking its probably some form of jQuery/Javascript clash that is particular to Safari 6, Flexslider and DMS combination. Flexslider also makes use of touch and transitions using CSS3 so it could be some sort of clash with that... maybe...

 

I'm not a jQuery programmer though I understand enough of the syntax to muddle my way through.

 

However any ideas in how to identify where the clash is or what bit of code might be causing it would be well received!!

 

Its a long shot and I know this is probably not a DMS specific issue, but any pointers would be welcome.

Share this post


Link to post
Share on other sites
Danny

HI,

 

I have just loaded your site in Safari and I am not sure what you're referring to. Are you talking about the Slides title and text ?

If so then I think that is an issue with the Slider and you would probably want to speak to them for assistance.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jamieg270

No I mean the content in the orange and black boxes, in fact any content that is not the background slider and its caption.

 

In Safari 6/Mountain Lion, if I pull the left edge of the browser in the content reflows responsively as you would expect. However when I pull the browser window out again back to its original width, the content (especially visible in the orange and black blocks remains stretched out to fill the whole width of the window and text etc is distorted. 

 

If I wait a while its sometimes resets the content back to its 1100px max width automatically. It always resets if I click in the browser window. Then it behaves normally if I resize the browser window.

 

I can retrigger the problem if I refresh the browser and resize the window again as above.

 

I've checked this on my own machine and via another as well as via Browserstack and it is repeatable across those machines/virtual machines running Mountain Lion and Safari 6.

 

I'll make some screengrabs in a mo to demonstrate it.

Share this post


Link to post
Share on other sites
jamieg270

Also just to clarify. When you load the site it all looks good, it only happens when you make the browser window narrower and then wider again.

Share this post


Link to post
Share on other sites
Danny

I am not seeing this, I have resized my browser multiple times and I am not seeing any issue. Unless my eyes deceive me.

Would it be possible for you to install a free app called Jing and record your issues, then share the link to the uploaded screencast please. This way I can see what the issue is first hand.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jamieg270

Hi Danny,

 

No problem, I've made a sceencast demonstrating the problem. Its just uploading now.

 

The link is: http://screencast.com/t/ZQoFBVmMQ1

 

Hopefully that makes it clear.

 

Thanks for your time on this, I suspect its probably something I'll need to pursue with the plugin developer, but thought I'd see if anyone had any insight here first.

 

And thanks for pointing me in the direction of Jing, thats going to be so useful...

Share this post


Link to post
Share on other sites

  • Similar Content

    • ipadanielle
      By ipadanielle
      Hi there,
       
      I'm having trouble with the Mediabox being responsive. The Image I have in it, is not resizing for the iphone, instead an empty white box shows up. My website is www.cinemaduo.com and its our logo on the front that is in the media box. Also, I have upgraded to DMS2, and had the problem before and after, thanks for the help
       
      I'm a bit untrained in CSS etc., but I catch on pretty fast. Thanks for the help.
×