So the hero animation transitions are not really documented very well anywhere I could find.
I can set up a page with hero-id on elements and have the transitions work fine, but can't get it to work if, for instance, my list of items lives in an imported element. On the page swapping, I get an instant change with no transition.
Changing page back gives me a transition as it can obviously find the hero-id in the main html.
So really the question is: can I somehow link a hero-id in an imported sub-element with an element on my main page or another imported element?
Related
This is one of the weirdest bugs I've ever encountered. Some chance it's an extension or a browser bug or something but it only shows up on the app I'm building when I'm refreshing it in development mode, so stackoverflow seems like the right place to start asking.
Basically under certain as-yet-unknown circumstances, every time I reload the page I'm working on, the <body> element slides off the page to the left about 10px. And then when I refresh again it often slides even further. If I open the page in a new tab, it's fine.
In this screenshot below, I've highlighted the <body> element in the element inspector.
Clues:
it only happens sometimes, but once it happens almost every refresh increases the offset
certain absolutely-positioned elements like the navbar continue to fill the whole width of the html element, but others don't
the body element doesn't have any styles or classes it shouldn't have
changing the body element position to absolute doesn't affect it
the html element and the body element are still the same width
I'm using a 4k screen on linux (?!)
My best guess is something like... it's double-loading some sort of AngularJS directive, although I neither know why it would do that nor why that would cause this bizarre problem. At any rate, likely I'll be the one to solve this, some months or years from now, but if you've got any ideas, I'm curious!
I’ve got a tricky issue going on that I can’t seem to figure out. It’s a lot of different files so let’s start without any code or file docs added.
So I’ve got a SVG image with a lot of square paths all over it. I placed an Square image over one of the square paths in Inkscape. Then I embedded the SVG file into HTML, where I think added a link to that path w/ image. I was having no issues adding the links or anything and it was working just fine, but now it seems as if the image is canceling out the link. Before the link worked just fine but when the image loads over the square it acts as if it’s covering the link. Before the image is fully loaded into the browser the link works and is accessible. But once the image loads on top of that path with the link it covers it and doesn’t work anymore.
Is this common and am I dumb? Seems like I’m just missing something here. Need to basically add the image somehow without it covering the linked path underneath.
Please help!!!
You have probably already found the answer. In SVG all elements are drawn on top of all previous (so the order of the elements in the file matters).
If one element completely covers the other below him then it will essentially block its interactive events. The solution is to notify CSS engine to drop through any pointer events for this element (or elements with same style) using
.nopointer { pointer-events: none }
in the section of the SVG or in the wrapped HTML CSS style section.
For the links to work for SVG elements - since you can add a link attribute to SVG elements as well, e.g. if you would have SVG IMAGE elements overlaid on your rectangles - don't forget to add the XLink namespace in the SVG root element declaration.
First of all, let me preface this by saying I am NOT trying to apply additional CSS to the contents of an iframe from the parent document. I am having issues with a perfectly working document that when displayed in an iframe, the styling breaks. I only say this because whenever I google this issue that's all I get.
I have an HTML document that works and displays perfectly fine when viewed in a browser by itself, however I need to show this content in an iframe. The issue is that somehow, it seems like it's randomly picking and choosing which CSS properties get applied.
For example, if you check the fiddle linked below and inspect one of the list items in the iframe, you can see that the li tags have a border-bottom set. However, if you look at the .service ul li selector in the code, you'll see that there is actually a border-left and border-right there as well which are being ignored. This is only one of the many weird things happening. If you inspect around the document you'll see more instances where this happens.
I've never seen anything like this and it makes no sense at all. I can literally see elements in the inspector where some CSS properties from the same selector are working, and some are ignored. This document displays without issue outside of an iframe.
fiddle
BTW the code is loaded from a data string rather than a URL because it's rendered from an ejs template and it is not served on a public route, nor do I want it to be. However this should be irrelevant.
There is a conflict with the hash "#" symbol in your css. Switching your hex color to red fixes the issue in your fiddle. You will have to come up with another way to add the color without introducing unwanted characters inside your iframe html code that is inside an attribute.
I'm making a website for an event, then I've added a countdown to it, but my footer and the button above it, are behaving differently in the page where the countdown is present.
I've come up with this:
the countdown is good as far as it's connected to a Bootstrap CSS;
That Bootstrap CSS makes my footer and button change aspect;
My question is: how do I make the countdown stay and work with the footer and button aspect unchanged?
This is the page of the website which doesn't work: http://goo.gl/mH9nLh
And this is the one which works:
http://goo.gl/24SZxQ
I'm not linking you the code 'cause I don't know where the error is, this way you'll be able to see each part of code and mostly: what should I take from that Bootstrap css file or some other tricks to get around the problem.
If you need anything please don't ignore this question, rather leave a comment I'll text back instantly!
I checked the 2 links you pasted above.
There is a main.css file which is included in the second link , which has styles for the table and it's subsequent child classes.
The same is not available in the first link and this is the reason you are seeing 2 different styles.
Please include the same set of css files in both the pages so that I can better debug the possible problem areas.
I am embedding simple html and css that i've written into another application using an iframe. Within my code, I am using CSS to create context menus when you hover over elements of the page. When I get close to the edge of the iframe with the hover menu, however, it gets cut-off and stays below the frame. I've tried many different variations of z-index, but nothing has worked. Is there a way to get this menu to show above the parent window?
Any thoughts on this?
Any positions and rules for belonging to the CSS stacking context are limited to the current document. This can't work using z-index, since the iframe-contents are a complete different document. You can't have anything "bleed" out of an frame. If you want to have an overlay, don't use an iframe at all.