Latest Update:
This got fixed in the new masonry version.
Original Post:
I have an AngularJS website with Bootstrap3 style, which works fine in Chrome, Safari and Firefox, but not in IE (and I thought those days would be over).
I use the Masonry-plugin to display some tiles. The first time I open the page IE11 sticks the tiles together. I believe it is because of some problem with the padding in bootstrap. When trying to debug the application or only show variable contents on console.log everything works fine. Also after reloading the page everything is rendered as expected, it is really only on the first time the page is accessed.
I've noticed that Masonry's website and examples work with IE so I'm trying to figure out what they have different.
The above mentioned problems also occur in IE10 - I don't have any information about IE9 and we don't intend to support IE8 or before.
Update: I've noticed that the masonry website doesn't use paddings (like bootstrap does) but margins instead, and indeed when I remove paddings and add margins, it works. However the question remains - Why doesn't it work with paddings?
Update 2: I have a working test which shows the error. It is quite extensive, and can be accessed here: http://server.grman.at/ie11-intro.html
It shows that the problem only occurs in IE, if the some script (probably the masonry library) is pre-loaded on a page before and afterwards used.
Here a screenshot of how it should look from Chrome:
And here a screenshot of how it looks for me in IE11:
Last Update: Yes, it's the masonry script, I've created a second intro page: http://server.grman.at/ie11-intro2.html which doesn't preload the masonry script and it works, now the quesion is - WHY?
After playing around with your demo a bit, I found that loading masonry.pkgd.min.js before Bootstrap and custom styles would resolve the issue for me. Something in Masonry's setup is breaking re-navigations in Internet Explorer - though I don't have specifics at this time.
Move the masonry script tag to the top of your document, above Bootstrap and your styles, and you should find that the issue is resolved.
The obvious and fast answer (as I'm not sure if the error is fixable in the masonry script in the first place) is, to remove a reference to the masonry script whenever you are not going to use it in the website.
Update:
This got fixed in the newer masonry version
Related
I'm working on a react app with create-react-app ejected (so that I can use css modules). It works perfectly in Chrome and nearly perfectly in Firefox (just need to make a few minor css adjustments), but in Safari, only the navbar is visible. Looking in the safari developer tools, http requests seem fine and there are no error messages. There are a few warnings about using Cloudinary images without http requests, but I get the same warnings in Chrome and the app still works fine in that browser.
Also, the images and elements that don't appear in the browser do appear in the elements section of the developer tools. The (now invisible) links even work. I thought maybe it was a z-index problem, so I set the background color to transparent, but the page is still blank. I'm not using the fetch API (per other suggestions on stackoverflow), and I tried adding -webkit- prefix to my css where applicable. In addition to css modules, I'm using styled-components.
Without error messages I really don't know where to start looking for a solution. Any ideas what could be causing this behaviour? I'm running the app on localhost and also Heroku, and am having the same problems with both methods.
Thanks!
Solution: apparently Safari deals with css positioning and z-index differently than Chrome and Firefox. I played with positioning (fixed, absolute, relative etc) so that everything appeared correctly on Safari, and the resulting arrangement also worked for Chrome and Firefox.
Edit: But there are still positioning problems in Microsoft Edge, so I'll have to make adjustments for that, too.
Using straight-out-of-the-box lightbox2 (no edits, no mods). It has worked faithfully for the past couple of years since it's been in use. Suddenly noticed the other day that the image no longer fades in/out using Chrome. Image just displays on a new browser page. Works okay on Edge, but not sure about Safari as I've not yet checked that. Is this a Chrome issue? Any fixes?
I had the same problem. Tried many things.
Then I used "lightbox with jquery" javascript that's on their website: http://lokeshdhakar.com/projects/lightbox2
Update: It is not necessary to combine lightbox with jquery. The issue in my case was that I was using jquery older than version 2. If you user 2.0 or above version of Jquery, lightbox will start working again.
I'm having an odd issue after having migrated my drupal project to a client's server.
After configuring the apache http.conf to accept clean urls, I'm now finding that the administrative overlay does not always respond.
-The Find content shortcut doesn't respond, but the Content link on the overlay does.
-The Edit link when on a node's detail page makes the site darken like it does when the overlay is being loaded, but the Edit window for the node never appears.
-The X (close) on an overlay page (like when using Content to see the list of all nodes, but then want to quit out of it and go back to the site) fails to close the overlay and a strange, second vertical scrollbar appears on the right of the browser screen.
I have had a similar problem before, but chalked it up to javascript on the page interfering with the overlay's own javascript. Now I'm not so sure.
If anyone else has had this problem, or can surmise what the issue might be, then I would appreciate any and all help given.
My thanks,
~M#
It looks as if you are using a jQuery version that is incompatible with the overlay module. It's probably because $.browser is deprecated in jQuery 1.9, see the following issue:
Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools
To fix this issue, you'll need to install the latest jQuery Update module and select something below jQuery 1.9 for the admin interface. This should clear up your problems in IE.
In using CKEditor latest version available now. In Chrome and Firefox it is working without any issues. But in IE7 I am facing some display issues.
When I click Image button the background goes black
body p in the bottom is not looking same as shown in Chrome
Also I get JavaScript error undefined is null or not an object
Please help
Are you sure that your page isn't running in Quirks mode (that the source is correct)? I don't see this issues e.g. on http://ckeditor.com/demo.
CKEditor 4.0 doesn't have support for Quirks mode - we're working on it right now.
In Gridfilters, if you are using a StringFilter field, then there is a property in StringFilter.js called :
icon: 'ux-gridfilter-text-icon',
Basically this loads a 'binocular' icon in beside the filter text box. This works fine with mozila, but with IE, the icon is not showing up.
Is this a known problem by any chance?
I am using the source at : http://ccinct.com/lab/filter-grid/
My ext js ver is 3.2.1
The girdfilters version seems to be v0.2.7 as per GridFilters.js
EDIT: This works in Chrome fine. Just IE is the problem
EDIT#2: Also , the other css properties like column headers etc are fine. it is with the loading of the image that there is a problem.
Thanks. it got solved.
I had taken the filters plugin (ux,resources) folders, and distributed the files in diff packages in my web application.
For some reason, that messed up things even though the references were all correct. When I started using the package as it was given, it got solved.
Not sure why though.