locked
Layout changes completely in Safari RRS feed

  • Question

  • User1091869387 posted

    As a newbie, I have some trouble with my application in Safari.

    Layout changes completely in Safari.

    Site is under construction on http://

    I can't figure out why it goes wrong in Safari. It's a classic .net application with Bootstrap 4. I think it's definitely a HTML of css matter. But you never know.

    Anyone an idea?

    Greetz, W.

    Sunday, March 15, 2020 7:24 PM

Answers

  • User-474980206 posted

    it looks like you are using the old windows version of safari which is no longer supported and does not match current behavior. you should stop using it. chrome is a better tester on windows. iPad's safari better matches desktop safari now days. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 25, 2020 6:47 PM
  • User-474980206 posted

    Safari like chrome is based on the open source webkit. They have different extensions to WebKit and different JavaScript engines. Safari & Mozilla use nitro, and google uses V8. Safari and chrome both use the same WebKit debugger.

    safari mobile is slightly different than safari mobile. Chrome is the best you can do on windows. On a Mac you can test Chrome, Safari, Firefox and edge, Also android and iOS mobile via emulators. 

    Note: webkit is just the rendering engine. Chromium is the base browser (render, JavaScript, & UI) that chrome, opera and edge are built from. also as Mac seems to have won the web developer/designer mindshare (even at Microsoft) window emulator versions are not required.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 31, 2020 12:51 AM

All replies

  • User-1330468790 posted

    Hi, woodywoodpecker,

     

    I tried your project in Safari and Chrome but I am not sure what exact the difference layout it is.

    The layout is not as what you said "Layout changes completely" so that it is a bit difficult and inefficient to find out the difference in that amount of elements.

     

    Could you please specify the problem?

    For example, list some markups with the CSS (if you don't just use BS 4) and post the difference. That would be much helpful to target the problem precisely.

    What's more, it would be necessary to know the version of your .net framework.

     

    My testing screenshot:

    Chrome:

    Safari:

     

    Best regards,

    Sean

    Monday, March 16, 2020 2:03 AM
  • User1091869387 posted

    Hi Sean,

    Thanks for your reply,
    The website was reachable on subdomain http://. I guess you went to the main domain huismakelaar.be. There was a redirect active.
    I’ve uploaded the site on the main directory http://

    Problems with Safari and bootstrap:
    Images are not adjusted in dimensions, bootstarp carousel is not working fluently in transitions, transitions are quite ‘stiff’, etc.

    Something is not okay and can’t figure out why

    Saturday, March 21, 2020 10:52 PM
  • User-1330468790 posted

    Hi woodywoodpecker,

      

    I retried this url and could not reproduce the problem as you described.

    1.The images was automatically responsive to the page and self-adjusting properly.

    2.Bootstrap carousel was working well except that the carousel always keep static for a while (like 5~10 seconds) and then will do the animation.

     

    Have you used another device to test if it works as you expect?

    If it displays the images not properly as well, then it should be an error within the safari browser. 
    You could use Safari developer tools to debug what the behind reason it is.

    Another suggestion is to remove the self-defined CSS class and leave the bootstrap Css class in your markup code. Then you could check whether the bootstrap Css class and js works or not. That way, you could identify the problem much easier without interference of others codes. 

      

    Hope this can help you.

    Best regards,

    Sean

    Monday, March 23, 2020 9:23 AM
  • User1091869387 posted

    Thanks for your feedback, Sean.

    I was a bit surprised when you couldn't reproduce the problem. We could reproduce the problem on a mac desktop.

    For this, I added screenshots as you can find in the links below.

    https://a.uguu.se/S02l4ZJz8ueL_Safari_1.png

    https://a.uguu.se/3ouj6D4FEMfl_Safari_2.png

    https://a.uguu.se/L1suQHpjry4i_chrome_1.png

    https://a.uguu.se/RxrZSqAhhCht_chrome_2.png

    Thanks for the tips about debugging en removing css for interference. I will check this out.

    Regards,

    W

    Wednesday, March 25, 2020 3:29 PM
  • User-474980206 posted

    it looks like you are using the old windows version of safari which is no longer supported and does not match current behavior. you should stop using it. chrome is a better tester on windows. iPad's safari better matches desktop safari now days. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, March 25, 2020 6:47 PM
  • User1091869387 posted
    Tnx, Bruce. Indeed it looks like the problem came from the outdated browser.
    Is there, by the way, a browser/emulator that gives the same results as the current Safari?
    Monday, March 30, 2020 9:13 PM
  • User-474980206 posted

    Safari like chrome is based on the open source webkit. They have different extensions to WebKit and different JavaScript engines. Safari & Mozilla use nitro, and google uses V8. Safari and chrome both use the same WebKit debugger.

    safari mobile is slightly different than safari mobile. Chrome is the best you can do on windows. On a Mac you can test Chrome, Safari, Firefox and edge, Also android and iOS mobile via emulators. 

    Note: webkit is just the rendering engine. Chromium is the base browser (render, JavaScript, & UI) that chrome, opera and edge are built from. also as Mac seems to have won the web developer/designer mindshare (even at Microsoft) window emulator versions are not required.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 31, 2020 12:51 AM
  • User1091869387 posted

    Tnx, that's a very helpful explanation. So that's also why detection of safari can be seen as chrome? And Firefox uses a different, his own developed, base + Gecko as render engine?

    Wednesday, April 1, 2020 1:56 PM
  • User-474980206 posted

    yes , firefox uses Gecko instead of webkit. The firefox team has a strong belief that for html to be truly a standard, there needs to more than one code implementation. But they are a lonely voice. Most browsers other than Safari and Firefox are now based on the Chromium browser, so there is even even less diversity.

     

    Wednesday, April 1, 2020 3:10 PM