In IE11, media queries in style tags with data-senna-track attributes are applied as though the page has a width of 0px about senna.js HOT 14 CLOSED

Note that everything works if senna.js doesn't process style tags in IE.

holatuwol@a993e03

Edit: Actually, styles don't get applied at all.

I was using the wrong style to confirm whether styles were working at all, will update the example in the topic post.

from senna.js.

Related to LPS-92572.

from senna.js.

hey @holatuwol, just taking a quick look at it, but I'll look into this in more depth this week to reap our options. This is a bit old, I can not remember which ticket we took and what the resolution was. But I put the words of Chema here metal/metal.js#383 (comment) where is the problem.

Even if we stopped tracking the style to solve this, it would not work, since in each navigation Senna will have to take the style and add the page again. Also it is not a problem to add the style in order on the page, I remember @diegonvs spent a few days trying to understand how it worked in IE, it seems that handling this via JavaScript in IE does not recompose correctly the same CSS even adding in the correct order.

from senna.js.

Hey @holatuwol, I added some comments here https://issues.liferay.com/browse/LPS-92572

from senna.js.

Hey just to let you guys know, this issue is possibly causing our videos to load to with "blurry thumbnails" in IE11 when using senna navigation (mainly clicking a breadcrumb item). Essentially loading the page without senna (direct hit) will bring in full HD version of the thumbnail. Navigating with senna then tricks our third party vendor player into thinking it's rendering on mobile and thus it serves us a low resolution image (around 100px wide) which because it's on desktop is being scaled up to 500px. That's why the image is blurry, senna is confusing the the player into serving mobile assets. Neither Liferay nor Kaltura are our products ... so I don't know how to get you guys looking at this for us.

I'm still trying to figure out how to word it for successful reproduction in Liferay support, not hopeful it will get through LESA to you guys. But yeah this would seems to be an explanation of what I'm seeing and it does impact more than this.

I think it's causing our web content templates to trip into "mobile view" also. We make a few tweaks to get our web content positioned and tweaked and such for mobile display. Senna seems to be tripping IE into those media queries thus showing mobile styles to a desktop browser.

from senna.js.

@duracell80 : My understanding is that the senna.js team has determined that this isn't an issue that can be fixed, since it boils down to a bug in IE11.

On the support side, we've provided fixes to disable senna in Liferay on IE11 for some customers who were concerned about the page rendering time performance regression introduced by #124 (to summarize, a side-effect of that fix is that IE11 will always re-download every CSS file on every senna-managed page navigation), getting a fix for this issue as a side-effect.

If you want to leave senna enabled, there might be a way to fix this issue from the Liferay backend, which I've described in LPS-92572. However, whether it will fix your thumbnail issue with Kaltura remains to be seen, because it's not clear from your current steps to reproduce that the Kaltura issue is due to a media query that IE11 is processing incorrectly.

from senna.js.

Yup I understand IE pain. I can't re-write Kaltura's stylesheets to have min and max in the media query and other customers can't rewrite thrid party vendor software to account for bugs that other third parties won't fix.

I can't re-write senna either so turning it off for IE would be the only solution. I would take slow page loading on a dead browser over mobile css in a desktop browser any day.

Unfortunately over 50% of our users use IE11 and that rises to 72% for the portal homepage which is where the issue is most visible. This situation really sucks. Liferay have to understand that IE is more popular than Edge in the enterprise, it just is, there's no other way of saying that Liferay is starting to fail for enterprise users who can't use Chrome. Not fixing issues particularity for read only browsing for IE11 just plays into Sharepoint's hands.

Believe me I pray to Tim.BLee and Cerf everyday that we won't get stuck in IE mode in the new Chromium Edge, but that's possible.

from senna.js.

@duracell80 : Those browser usage statistics aren't unusual. My understanding is that browser's continued dominance internationally is what pushed the product team to leave IE11 on the Liferay compatibility matrix for 7.2 with "limited" support, even though Microsoft itself has stopped supporting the browser.

Because SPA is included through a top head dynamic include, the change to disable SPA for IE11 is straightforward: an if statement at the beginning of SPATopHeadJSPDynamicInclude to check the browser.

If you haven't gotten things working already (your comment on the LPS leaves me with the impression that you've already got a workaround in place), you can:

1. create a new component with the required changes and blacklist the existing one,
2. replace the corresponding bundle with a marketplace override, or
3. ask through a Help Center ticket if you can get a hotfix that provides the necessary changes

from senna.js.

Gotcha and kinda surprising that Liferay would even consider cutting IE11 from 7.2. That would have put Enterprise in an un-upgradable looking for another vendor position.

I opened a feature request to have an easier, less code / no code solution in DXP. It's certainly a personal opinion but I don't go for customization like that. Particularly as this is an issue for Liferay to solve and not for each individual lead developer to solve for their install.

The hotfix sounds ok in isolation but I've certainly run into issues where a hot fix leads to even more instability so that's not ideal either.

If it's a trivial change can't Senna be configurable through a control panel UI? Flip a toggle and IE gets senna disabled.

from senna.js.

I'm far from being a css expert, but this is what I found so far while testing this.

I tested with various changes and this is the only way I found so far for the style to be applied correcly in IE 11.

@media all and (min-width: 1px) and (max-width: 1px) {
  #header {
    color: red;
  }
}

This is pretty strange because an html file with the same style declaration as describred in the issue but without senna works as expected in IE11. Will continue to investigate.

from senna.js.

Setting both max and min width is given as a solution to stop mobile breakpoints leaking to desktop IE. This assumes access to stylesheets. I can't change third party CSS in iFrames. I'd have to contact kaltura and get them to re-engineer their styles and every other third party library I did import to the portal I'd have to re-engineer their code and own it myself.

The only fix is to turn Senna off on the links and that then resolves the issue for say a user clicking the portal logo to return to the homepage. I should say that I hide the DXP logo in theme and place our own logo that the user can't change and that's why I can turn Senna off on that href.

The style tags in the web content templates don't have the data-senna-track="temporary" attribute.

The real solution would be for Liferay to provide a toggle for portal admins to turn senna off for IE.

from senna.js.

Hey @duracell80,

I know and understand you don't have access to those external stylesheets or 3rd party css in iframes, I just wanted to see if there was a condition under which the style would "work" in IE.

Disabling senna.js for IE11 might solve this case but it might bring up other issues.

In anycase, I'll continue investigating and discuss this issue with the team to see if we can come up with a good solution.

from senna.js.

In my experience at least with DXP in IE11 ... Senna causes so many issues. Pages seem to load a lot faster in IE with SPA off.

The downsides outweigh the advantages, particularly because Senna is so Javascript heavy it feels like older browsers that don't process javascript as well all that processing seems to make the UX worse and make the page loads slower.

I don't know how senna works, but in layman terms IE isn't a fast Javascript browser. Edge is better but I would think equity for older browsers as in just turning the feature off would help speed up those older browsers.

If Liferay are limiting support for IE or dropping it completely ... Disable Senna and give IE stylesheets that don't use flexbox.

from senna.js.

We're about to archive this repo and mark it as read-only. As explained here the Senna code base has been ingested into Liferay DXP itself in the form of the frontend-js-spa-web module, and we have migrated the v2.x history over into the liferay-frontend-projects monorepo so that we can keep our stuff together (and have uniform testing, linting, building etc) and will cut any necessary maintenance releases from there.

So as to clean out stale issues, I am closing anything that hasn't had any activity in the last year. If this is still relevant, would you mind opening an issue over there instead?

from senna.js.