In the video i uploaded on screencast you see the reload of my GWT Bootstrap3 (see https://gwtbootstrap3.github.io/gwtbootstrap3-demo/) project. The page I display is almost empty (so there are not other icons which need to be displayed).
The video starts when I hit the F5 key on my chrome browser. You'll notice that the screen reloads then the buttons show up as blank squares which are then filled oiut with the icons.
http://www.screencast.com/t/dd7B9lr6
How can I manage to show them up with their icons immediately
The buttons are placed within a Vertical Panel as a ButtonToolbar within ButtonGroups
[...]
<g:VerticalPanel addStyleNames="{styles.tables.listBeanTable} ub-AbstractSummaryWidget">
<b:ButtonToolBar addStyleNames="{styles.summary.menuBar} hiddenPrint">
<b:ButtonGroup >
<b:Tooltip title="{msgs.refresh}" container="body">
<b:Button ui:field="refreshButton" icon="REFRESH"/>
</b:Tooltip>
<b:Tooltip title="Delete meeting" container="body">
<ui:attribute name="title" description="Label for button: delete meeting"/>
<b:Button ui:field="deleteMeetingButton" visible="false" icon="REMOVE"/>
</b:Tooltip>
[...]
I am not sure whether exactly when the icons are drawn to replace the squares. Is it with the call to " initWidget(uiBinder.createAndBindUi(this));" within the constructor class of the widget?
If you were about to say: hey buy a more powerfull laptop then it'll display faster. The gwtbootstrap3 example (e.g. https://gwtbootstrap3.github.io/gwtbootstrap3-demo/#icons) ) shows up immediately correct.
Thanks for any help
Hannes
The icons are loaded from Font Awesome. They are just <i> tags with the appropriate CSS style applied - this style forces the content of the <i> tag to become the desired icon. My bet is that the problem is that the font is not being loaded "fast enough". Maybe it's not cached? Maybe it's loaded from a slower server? Check your browser's developer tools to see from where the font is loaded and how long it takes. It should loaded from a folder relative to your webapp, unless maybe when you are using the GwtBootstrap3CDN.gwt.xml module.
What really resolved the issue was the change to gwt 2.7. all performance issues disappeared.
Furthermore in the case above it helped a bit to set the ButtonToolBar invisible (setVisible("false")) in the ui.xml. and at the end of the Ctor make it visible "setVisible("true).
Related
FOUT in SPAs using FEFs. That's a lot of odd acronyms. :)
But it's still an issue.
I have a dynamic component which loads a bunch of components which are meant to look in a very specific way. Each would have its own css, and critically, its own specific fonts.
The fonts are the issue here.
What ways are there to avoid this FOUT in this case?
This is my current research on the topic:
Browsers have a mechanism to hide text it detects is styled with a custom font until the font has loaded.
This does not work in vue, because the text isn't loaded yet either for the browser to detect, so when JS puts the text, this browser mechanism isn't triggered.
Might be fixable via SSR, static DOM - browser can now detect. Still might not want - FOIT (Flash of invisible text) arguably worse (no content vs bad content).
This does nothing for dynamic components
CSS is consolidated unless async component.
You do get all CSS imports, but not all fonts until they are used on the page. I.e. it makes a network request for the css import, but not the fonts, until something on the page gets styled with this font. At least it's... quic. :D
WebFontLoader?
A js library by google/typekit, companion to google web fonts.
Possibly can be used to delay component loading until the font has loaded using its events?
Requires things outside the component to know about the font.
No obvious way to reach down and pull out CSS.
Depending on how many fonts you're loading and the size there are a few things you could do.
Call the fonts in the base HTML file (separate from your other CSS) so the browser is aware of them. Then create a hidden div in the parent component with CSS calling the font for the child. This will cause the browser to request the font before the child component is loaded.
Load all fonts separately in the HTML with rel='preload' or rel='prefetch'. I would do this at the bottom of the HTML so you don't block other content.
Load your fonts in the created lifecycle hook using the CSS Font Loading API. I'm not sure how this will work with Google Fonts vs self-hosting.
Create CSS transitions when loading content like a half-second fade to mask the FOUT. This is obviously not a solution but never underestimate the power of smoke and mirrors to influence the way your app feels.
Also, you should try to make use of the font-display (docs) CSS property. This won't solve the problem but it will make the results more predictable.
I have 2x promo banners one for desktop (#usp-banner), one for mobile (#usp-banner2).
Each one should only be displaying to their respective sizes because of the use of the .css:
layout.min.css
#usp-banner2{display:none}html{padding-bottom:0!important}...
custom.css
#usp-banner2{display:none}
#media (max-width:767px){
#usp-banner{display:none!important}
#usp-banner2{display:inline}
}
Upon loading the page on Desktop or Mobile we see BOTH banners and their correct banner hides after about 1 sec. Source: https://www.ivyandfig.com
I am fairly new to Shopify, but am able to modify templates. I'm curious is this due to the way .css is loaded?
Anyone have suggestions on how to ensure the css is being loaded before the images display (as I am assuming this is part of what is happening)?
Most of the stylesheets and scripts on your site are being loaded via JavaScript. That JavaScript is triggered much later as compared to when the initial content is visible on your site.
As you have guessed, this is happening because CSS is loaded much later so for the time being both images are visible.
As that part is a Shopify section, a quick fix is to include the related CSS rules inside section. More of that is available on Shopify Documentation for Sections.
Another fix may be is to create a separate stylesheet with only rules like that CSS reset, hide and show content etc and include it via link tag in header.
You can also use some logic based on inline styles by hiding both initially and then display later via JavaScript.
I am working on some front end design, and while fiddling with some stuff in Chrome developer tools I added the following to the webpage I am working on:
Even after reloading (and emptying cache and hard reloading) this style persists, regardless of whether or not I have the developer tools open.
I am not sure where this style is coming from or why it refuses to quit!
Has anyone experience something similar and were able to figure out a solution?
EDIT: If it matters this is being applied to a table element
Only two options really: either you defined the width: 100% as an inline style or it's being added via JS as an inline style.
I have a script that has a jquery script controlling the css(init.js) and another noscript tag with the css files themselves. There are 3 css files for various screen dimensions
However i realise this approach causes the css to keep fluctuating. E.g refresh causes font size to change, refresh again page changes back. The font itself also changes.
Anyone could suggest what may be an issue?
Thanks!
I'm using jQuery mobile to create a list menu.
I use a 'slide' effect, when you click an element to show the next page.
I was using a css style sheet which had too many design elements.
So I went ahead and removed the stylesheet and instead added the required styling in the html document.
But now the slide effect doesn't work if I click the elements.
If I include the css style sheet, then it starts working again.
Here is the http://jsfiddle.net/r24XY/ code.
The whole reason why you see those cool looking animations is because of that CSS file.
You must have both JQuery Mobile .js and .css library files in order for things to move.
Ripping certain elements out of the library CSS files just to build your own is a bad idea, very bad idea. What if you miss something ? Even if you don't.. what if they release an update tomorrow? You're going to have to maintain a lot of code.
CSS animations (or transitions / transforms) are used in jQuery Mobile and other mobile web frameworks since these are hardware accelerated on certain devices (namely iOS). Thus, removing the CSS file of course removes the animations.