I'm using Emotion for CSS in a React project.
It's working correctly but I have one component that uses the css property with JS arguments and it seems Emotion is caching the CSS despite the variables changes.
Here's a CodeSandBox to test the behavior : https://codesandbox.io/s/youthful-lumiere-bfg7o
When you click on the images, the zoom should start from the top left corner of the image.
It works the first time, but after clicking multiple times on one image then another, Emotion is keeping values in cache (I logged the JS values before sending them to Emotion, you can check in the console)
Animation is slowed down to see the bug.
Thanks for the help
Related
I'm building a project using AngularDart and bootstrap. My project includes an NgComponent that is being rendered in a shadow dom. On load there seems to be a 1 out of 5 chance the component will render visibly on the page. The other 4 out of 5 times it takes a browser resize (to where the responsive bootstrap css snaps back) in order to see the component. Is this just some funky css or what?
Usually this is when an error occurs. When you have set class="ng-cloak" Angular hides the content and when the initialization of Angular fails at some point it doesn't come to the point where it unhides the content. Check the output in DartEditor or Development console.
I have an element common to all pages that uses a font called "Just Another Hand" provided by Google Fonts API. On one of my pages, the element coincidentally happens to load in front of a Google Map and I noticed that when this happens the font rendering changes to a more eye-pleasing, fuzzier but smoother appearance (see screenshots below). I am using Chrome v.29 on Windows 8.
Further observations: Notice the grey header text (also visible in screenshot) does not change dependent on the presence of a Google Map. Use the inspector to remove the z-index property and the font rendering will return to it's original, less eye-pleasing state. The element has to be in front of the Map for any effect to happen.
Why is this happening and can I leverage one of the technologies to force/suppress this effect?
P.S. I appreciate this is not a coding question by I am hoping it will receive a coding answer.
Is there a way, without javascript, to load a small image for a background before the real image is downloaded? Without javascript because I know how to do it with it.
I can't test if the following CSS3 would work because it works too quick:
body {
background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}
If the tinypreload.jpg is only, say 20k, and the hugefile.jpg is 300k -- would this accomplish the task? I assume that both downloads would start at the same time instead of being consecutive.
Update
Timing the results using Firefox's profiling revealed that it's not practical / not worth it to load a smaller background first. Main reason is the connection time. For tiny pictures it's the same time to connect as it is to download the content. For images where this becomes worth it -- the file size is not recommended for mobile.
If you still want to achieve this effect - combine all your "necessary" images into 1 file and display them as cropped background with correct offset. Load your high-res images through javascript, and update the content afterward.
You could exploit css load order and overrides to achieve this result.
Try loading the small image from your main css file and then put a <style></style> tag at the bottom of the html page. The inline style will override the main style but will load last because of it's position in the code.
The difference would be milliseconds though, so it may be too quick. It's also hacky and would result in invalid, but working code. Worth a shot though.
If you're trying to fix a mobile problem then have a look at this article on context specific images as that might be a more effective way to go.
This article on CSS3 multiple backgrounds may also help, as you may be able to exploit the stacking order to achieve the result you're after
It would be useful to know what problem you are trying to solve beyond load order, as it's hard to give advice on this one.
As I said in my comment you can use the 'net' tab in firebug for firefox (called timeline in chrome) to see the actual load order on your page - you can even filter it (on firefox) for CSS only or images only - this will enable you to test.
I am building an iOS Safari touch-based app and find CSS transitions and transforms work great.
But I have two things I can't seem to achieve using just JavaScript and CSS.
Usually I want the element to translate with a duration of 0.2s. But in code I occasionally want to instantly translate (initial positioning). If I update the duration to 0 or remove the transition style entirely, it doesn't seem to have an effect (acts as if the 0.2s is immutable)
When zooming I want to update the transform-origin property. This also does not seem to work, and seems stuck at my original stylesheet-set value. Specifically I am trying to do this on the gesturestart and gestureend events
Hopefully there is an approach to making this work. Maybe setTimeout async processing?
Update:
I have a js fiddle example to better illustrate my problem in #1, and it turns out that setTimeout fixes it, but it's a strange solution that I'd be interested in improving:
http://jsfiddle.net/w9E7t/
It seems like I'm unable to do these steps synchronously:
set appropriate classes for an instant transition
apply transition style
reset classes to their default (with transition) state
You can accomplish this by using two CSS classes, one which sets the timing-duration to 0s and the other which sets it to 200ms and then applying the classes programmatically in JS. Take a look at this JSFiddle for an example.
One of Web development's best practices is to separate your document's parts into structure/content (HTML), presentation (CSS), and interaction/behavior (JS). In the example above, the presentation of the content (a timed translation) stays defined in CSS while JS is used only to respond to an interaction (a MouseClick event).
You should be able to change an element's transform-origin using the WebkitTransformOrigin style property in JS. Here is an example JSFiddle. I tested this on my iPhone4 and it correctly logged the new transform-origins in the console. Again, this can also be achieved by using JS only to listen for the gesture events and updating the element's class, while keeping the style rules of the class defined in your presentation logic (CSS).
Note well: In my examples, I am updating the element's .className. Since it is possible that your elements already have many classes, you may need to implement addClass/removeClass functions to properly set the correct classes, several examples of which can found on the Web.
Update:
Sorry for the delay... There are two ways you can approach this problem and the first you have already discovered.
Another way to handle switching back the class name is to use the webkitTransitionEnd property. This fires whenever a transition on the element finishes. It would look like this:
document.getElementById('puck').addEventListener('webkitTransitionEnd', function() {
puck
.removeClass('without_transition')
.addClass('with_transition')
}, false);
Unfortunately, when the transition-duration property is set to 0, this event is not fired :( I'm not sure if that is by design or a bug, but that's just how it's currently implemented (though I'm guessing it's by design since at this point the browser is not really doing a transition but rather just applying the transformation). The workaround in this approach is to set the transition-duration to 1ms (which will essentially look instant).
While the setTimeout approach looks hackish, many mobile framework groups use it throughout their code since the function will fire after the transition that occurs from switching classes (similar to transitionEnd). Take a look at Sencha Touch and you will find it numerous times.
I've forked your JSfiddle to show my example here.
Let's say I have my whole sites CSS in 1 css file so it is fairly large, I am wanting to know if a page uses 3 classes with something like below that request 3 images from the server, lets say there is something like 50 of these in the whole css file, does everyone get called/requested from the server or just the 3 that a page needs?
background-image:url(http://localhost/images/btn3.gif);
There's one easy way to find out (ok, not easier than just asking Stack Overflow). Put this into a CSS file:
#nonExistantElement {
background-image: url(myScript.php);
}
and make that script record the hit by writing to a file or something.
Ok, I've just done that myself now. Turns out: no it doesn't get the file. (Tested on Firefox 3.5.2, IE7, Chrome 2.0)
I don't think so. Images required for hover pseudo-class (mouseover) are loaded when you hover, and there can be a noticeable lag on the first appearence (unless you use a cheat to get it preloaded).
The browser will load what it needs to display a page. Although I can imagine various browsers could employ certain caching techniques and prefetch everything they see in a CSS file.
Your answer lies with firebug
No, a request for the image is made only when the class, or id is present on the page.
If you do want an image that's not visible on page load to "preload", then there are a variety of tricks you can use, such as displaying the image off screen on load. The most common case where "preloading" is necessary is in the case of background images that change on hover, where there would otherwise be an unacceptable lag the first time the user hovers and causes the image to change. The most common solution to this problem is called "CSS Sprites". You combine the default, hover, and (if present) active images into one file, one above the other, and you simply change the background image offset on :hover and :active.