Vue.js - Displays incorrectly in Safari - vue.js

I am working on one web application and learning Vue.js in parallel.
My site working correctly on Chrome, Firefox and Opera, but in Safari layout is moving around.
Myb .browserslistrc
> 1%
last 3 year
not dead
not ie 11
npx browserslist displays the correct list of browsers, including Safari, but it doesn't work fine.
What could be the problem?
I tried changing .browserslistrc
adding -webkit-box options to css

Generally understood.
The problem was not with Safari support per se, but with the non-working popup window setting
display: flex.
Changed to
display: table
and it worked

Related

Safari 12 live editing of stylesheet not working

I used to be able to live edit stylesheets under Resources in the developer console in Safari but since Safari 12 was released, the changes made to stylesheets under Resources no longer takes effect.
Is it just me or is this a problem in Safari 12?
I found the problem, there was a parse error in the stylesheet.
It used to work in Safari 11 but in Safari 12 the stylesheet with the parse error is not parsing correctly and the live editing doesn't work as expected.
Fixing the parse error resolved it.

Fabric js not working on IE 11

I have created whiteboard with fabricjs and javascript. It works fine in chrome and firefox but all of fabricjs functions does work in Edge but not working on IE 11 it is completely blank. How can I fix this problem?
My fabric version is 2.2.3.
internet-explorer-11 fabricjs whiteboard

Safari Inspector CSS Media Query Selectors Show as [object Object]

It's just as the title says, all CSS selectors which are inside of media queries are showing in the inspector as [object Object]. Has anyone else run into this? Does anyone have any idea how I can force it to show the actual selectors being used? Here is a screenshot:
Same here. All selectors. Running a webview in Cordova on an iPhone 6+, iOS 9.0.1. Stylesheets generated with Stylus.
Running the identical css and html in OSX Safari works fine.
UPDATE-- Fixed by Safari 9.0
We’ve had a similar problem when using the keyframes mixin of LESS HAT. CSS selectors appeared as [object Object] in the web inspector when using mobile Safari on iOS9.
LESS CSS with LESS HAT generated stylesheets which stopped working after the iOS / Safari update. LESS HAT’s GitHub Issue #156 addresses and Pull Request #157 fixed these problems.
If you are not using LESS HAT or the like, it might just be a problem with a faulty CSS rule. In our case Safari’s console showed a warning: Invalid CSS property declaration […]

Sencha Touch 2.2.1 not run on IE10

I am a newbie of Sencha.
I use Sencha Architect (Version: 2.2.2 Build: 991) to create the Sencha Touch (2.2.1) application.
But when I deploy and run it on IE10, it does not work, showing blank screen. I open the debug mode (F12), and I see that the browser always auto changes to the Browser mode IE10 Compat View, Document Mode: IE7 standard.
I switch the Browser mode to IE10, the app run again. Is there any config I need to set to run on IE10? Or is this a bug?
Sencha Touch is built for Webkit-based browser (Chrome, Safari)
IE and other browsers like Firefox are not built on Webkit, thus not able to render pages written with Sencha Touch. Even if you can run it this time, there will be elements that cannot be displayed properly, causing the page to have weird look.
Update: sorry for the wrong info. Since 2.2, Sencha Touch provides support to IE 10. So this means your page should be rendered without any problem with IE10. I tried opening up a page created by Sencha Touch 2.2 on my Lumia, it was OK without any problem. I guess IE10 on desktop may have a false detection in your case and try to open the page in IE7 compat mode. On actual device there shouldn't be such issue.

My website crashes Safari (both desktop and iOS) consistently

My website http://remotejobs.io crashes Safari consistently. I first noticed the crash last night when I was at a Verizon store and I tried browser testing the site on an iPad. So I tried 2 more iPads at the same store, and the site crashed iOS Safari on all 3 devies, every single time I tried to hit the domain.
The exact workflow is:
Open Safari
Enter http://remotejobs.io
That's it. As soon as you hit go the site crashes.
This also happens on desktop Safari (tested in 6.0.3 on OSX 10.8.3 only), and produces an error report every time. Here's a copy of one of the error reports generated: http://go.jag.is/OGcS
The site is not throwing any JS errors, and works fine on other modern browsers that I have tested, including Chrome, Firefox, and even IE9 (shockingly enough).
One strange thing though, is that it only seems to crash iOS Safari on iPads, not iPhones, as I can successfully load the site on my iPhone every time.
What on earth could be causing this, and how do I debug it?
UPDATE: I tried commenting out the main stylesheet, and the site no longer crashes Safari without that stylesheet. I tried both a regular stylesheet, and a minified stylesheet, and both crash the browser.
UPDATE 2: I narrowed it down to the CSS by commenting out JS and leaving CSS in, and still it crashed. Then I tried removing all the transition properties, and it no longer crashes. So apparently the transition properties were causing the crash.
So I was able to narrow the problem down to the CSS with Adam Moore's suggestion, and then to the transition property declarations with Jonathan Sampson's comment.
I removed all the lines with transition and the site no longer crashed.
So then I looked at the values, and tried unifying the duration values, to see if that would help, since I was setting several different duration values across the different properties, including .5s on one, .3s on another, and .25s on yet a couple more. But unifying them didn't affect anything - still crashed.
Finally, I tried changing the transition-property from all to color, since color was the only thing I was really changing, and no more crashes! So apparently that was the solution. Seems Safari was choking on trying to transition all the properties.
Your website does not seem to crash Safari 5.1 on Windows 7. To go about debugging what's causing the issue, start by turning off the CSS, then one by one disable JS files until the website stops crashing. Once you've figured out which CSS file or JS file it is, then post a link to the file and I'll see if I can help!
I stumbled across the same issue in Safari and tried everything mentioned here. I also checked the css in the CSS validator and fixed some issues.
But my trigger for the crash were padding with percentage values. I converted the %-Values from the paddings and all the things were fine.
-webkit-transform-style: preserve-3d !important;
Caused Safari to continuously reload because of error. Removed that and it worked. :).
Safari - Version 8.0.8 (10600.8.9)
OSX EL Captain