search

mikemaccana / outdated-browser-rework

Detects outdated browsers and advises users to upgrade to a new version. Handles mobile devices!
MIT License
224 stars 62 forks source link

Code in dist folder not working on < ie10 #102

Closed Njaah-0 closed 4 years ago

Njaah-0 commented 4 years ago

I'm running the example index.html in Browserstack, serving it with Serve. It works on IE10 and IE11, but anything older doesn't. Div doesn't get populated at all, and there are no errors in console whatsoever. Then I also modified outdated-browser-rework.js by adding console log to beginning of the module.exports.

module.exports = function deepExtend(/*obj_1, [obj_2], [obj_N]*/) {
    console.log('this far?', arguments);
    if (arguments.length < 1 || typeof arguments[0] !== "object") {
        return false
    }

This console.log never fires

Njaah-0 commented 4 years ago

Ok, I managed to resolve this finally. It was caused by IE being in Quirks mode by default, because index.html example doesn't have <!DOCTYPE html> tag. This then caused a few interesting issues. First was that display: none specified in style.css was held as more important that the inline style later given by code. This meant that banner was never visible. Second was that absolute positioning didn't work at all.

While the importance of <!DOCTYPE html> could be mentioned in the README, quirks mode could also be fixed be removing display: none from style.css and placing outdatedUI.style.display = "none"; right after the outdatedUI variable is populated. It wont fix positioning issue, but at least the banner would be visible.

What re your thoughts on this @mikemaccana?

mikemaccana commented 4 years ago

Can you send a screenshot of what it looks like with quirks mode on?

If it looks bad, we'll update the docs to mention the DOCTYPE requirement If it looks OK, we'll use the second option

Njaah-0 commented 4 years ago

It looks like this, it renders after the content and closing X is positioned to middle.

Screenshot 2020-04-14 at 20 54 34
mikemaccana commented 4 years ago

That's bad (since it's not closable). Can you update the README with the DOCTYPE requirement?

Njaah-0 commented 4 years ago

Yeah, I will do that. Btw, the X is still clickable though :D

Njaah-0 commented 4 years ago

https://github.com/mikemaccana/outdated-browser-rework/pull/103

mikemaccana commented 4 years ago

Thanks Ronnie! 🙂