The browser version is Chrome 87.0.4280.88
Here is how I accidentally detected this bug:
There are two independent divs on the page and both are position: fixed;
One of them has a hover effect with which its mix-blend-mode is changed.
The other one has glassmorphism style on it with backdrop-filter: blur(...px);
The filter works only when the other element on the page is set to mix-blend-mode: normal; otherwise it looks like as if it was not supported.
I am going to quit using that hover effect for now anyway but if there is a trick then it would be nice to let the world know about it.
Came across this bug as well (Chrome 90).
Quick Fix:
Add any backdrop-filter rule to the same element that has the mix-blend-mode rule applied.
Example:
.blend {
mix-blend-mode: difference;
backdrop-filter: opacity(1); /* fixes the chrome-bug */
}
The previous solution also worked for me (Chrome 93). Although I've had to wrap my element inside another and apply the mix-blend-mode to it to make it work like so:
.wrapper {
mix-blend-mode: multiply;
}
.blend {
backdrop-filter: opacity(1);
}
Save me a lot of hours. Thanks a bunch!
Related
Inspired by IntelliJ's 3 panel merge conflict view, I am trying to build something similar for vscode. I figured out, that I can integrate three complete customizable monaco-editors within a vscode Webview. But I cannot figure out, how monaco-editor applies the line padding in its diff-view like in the picture below (as I don't want to have a two-way but a 3-way diff using the internal diff-view is not an option for me):
Is it done through custom lineNumbers: lineNumber => isPaddingLine ? '' : lineNumber - someOffset, and inserting empty lines ("padding lines") at the related place and apply a deltaDecorations to those lines?
I hope there is a more easy way, which does not need the "padding lines" hack. Ideally I could just add something to a deltaDecoration like padding-bottom: $Xem
If I have just overlooked a way with vscode's api to achieve something like that, that would be of course more welcome than to deal directly with monaco-editor.
Thx a lot for any help / ideas :)
I finally found it :) IViewZone is the used magic.
And https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening-to-mouse-events is a nice example
Is there currently any way I can create an extension that applies a text decorator above or below the specified range which I can use to supply any HTML/CSS visual I want?
I'm still working through the API and my guess is either no, or not directly via the extensions API.
It depends on what types of decorations you are talking about. Since you used the words "text decorator" then I'm going to assume you're talking about the decoration API described here.
As you can see, there are several css properties that they officially support, but none of them "arbitrary css".
What I've done, though, in my vscode dimmer extension, is apply an opacity style using this technique:
dimDecoration = vscode.window.createTextEditorDecorationType(<vscode.DecorationRenderOptions> {
textDecoration: `none; opacity: ${opacity / 100}`
});
When vscode sees this, it basically adds text-decoration: none; opacity: 1 to the stylesheet.This allows me to use arbitrary styling.
The above snippet creates a "Decoration" which can then be applied to ranges as shown below.
function dimEditor(editor: vscode.TextEditor) {
if (!dimDecoration) return;
let startPosition = new vscode.Position(0, 0)
let endPosition = new vscode.Position(editor.document.lineCount, Number.MAX_VALUE);
editor.setDecorations(dimDecoration, [new vscode.Range(startPosition, endPosition)]);
}
Disclaimer: Of course, this isn't officially supported and they could change the way they process the arguments to stop at the first ; and anybody using this workaround would have a broken extension.
Edit:
If you're wanting to have a "hover" behavior, there is the HoverProvider api. It can take a "marked string" which is essentially markdown, and display it. This extension uses it to display img previews on hover.
If markdown will meet your needs you can try that, otherwise you can try with arbitrary HTML and see if it accepts that.
Hi I have several js/mootools code in a coffee file that I want to combine together as in
$$("#head").setStyle('border-right-color','#e64626');
$$("#head").setStyle('background','#e64626');
$$("#console").setStyle('border-right-color','#e64626');
$$("#console").setStyle('background','#e64626');
Is it possible to combine this into one line?
Although what #sergio gave you is the correct answer and what you wanted, it's probably the wrong thing to do (though his answer is not at fault, its the question that is off).
Setting element inline styles in JavaScript for effects is just not a very good practice. It has its uses in animation/fx but this does not seem to be the case. The reason is that it breaks cascading due to the high specificity and makes it much more difficult to revert, control or change afterwards. It also makes it harder to skin and restyle your app as there's a clear lack of separation of concerns, style in code is rigid.
You need to solve this via CSS
scenario 1: static, non mutable - not very good due to use of ID rather than classes but:
#head, #console {
border-right-color: #e6426;
background-color: #e6426;
}
scenario 2: dynamic, need to differentiate elements on some event such as click, focus, mouseover - though you can solve most of these with pseudos like :focus or :hover, then abstract this into a class:
css:
.highlight-red {
border-right-color: #e6426;
background-color: #e6426;
}
javascript:
var els = $$('#head,#console');
// on whatever event...
els.addClass('highlight-red');
// ... later
els.removeClass('highlight-red');
you will thank yourself later or your successor will or your client, whatever. this has the added benefit that next time you need to change styling or add more rules to differentiate, you have one place to go to. you can even add transitions / animation effects for evergreen browsers.
You can use setStyles() and pass it a object. You can also use , in the string you pass to $$ to select multiple elements. So it would result into:
$$("#head, #console").setStyles({
'border-right-color': '#e64626',
'background': '#e64626'
});
jsFiddle: http://jsfiddle.net/sevvtsx0/
in one of my scene I have
<div id='MenuList'></div>
then I add list to it like this:
$('#MainListTitles').sfList({
data : [ 'AAA', 'BBBB', 'CCC']
});
How can I customize colors and height of each list item ?? I tried in css like this:
#MenuList.sf-ui-list {height: 333px; text-align: right; background-color:#ffffff} - works
#MenuList.sf-ui-list-item {background-color:#000000} - not working
First of all, "#MenuList.sf-ui-list-item" would never work, because you don't have the same element with id "MenuList" and class "sf-ui-list-item". This is basic css. Correct usage would be "#MenuList .sf-ui-list-item".
On the other hand, Samsung does a very lousy job with it's SmartTV SDK. It's so bad that it looks like they don't even want people to develop apps for it.
According to the API doc, you should indeed style class "sf-ui-list-item", but if you run your project with "Debug Samsung Smart TV App using Web Inspector" you can see that they use class "sf-ui-list-blured".
So, logical step would be to style:
#MenuList .sf-ui-list-blured { ... }
I would recommend that you maybe create your own styles and pass them as 3 parameters in ".sfList" command (classes: focusCssClass, blurCssClass and selectCssClass as stated in API doc).
I have a problem with my firefox extension
I have a XUL popup panel with a hbox for the tag cloud, and a JS code to add divs to this hbox:
<hbox id="tag_base" ondblclick="alert('done')"/>
JS:
var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)
I need to get the dimensions of each added div, however, getBoundingClientRect simply refuses to work.
If I remove alerts, it's always zero.
With alerts the story is different:
The first time the alert is called it returns zero, although the div appears on the screen.
Any subsequent alerts return the correct coordinates.
If I set a breakpoint in Chromebug, everything is reported correctly.
If I do not interupt the execution in any way, and run a loop, only zeroes got returned.
This has got me quite confused.
Calling "boxObject" produces the same results, while "getClientRects[0]" is undefined on the first call.
Any hints on what might be causing this will be greatly appreciated.
Note :
Caution, if you use getBoundingClientRect with an element which has display:none then it will return 0, anywhere in the dom.
Although I can't find any documentation on this seemingly fundamental issue, the problem you noticed is most likely because the layout (aka "reflow") process has not yet run by the moment you ask for the coordinates.
The layout/reflow process takes the page's DOM with any styles the page has and determines the positions and dimensions of the elements and other portions of the page (you could try to read Notes on HTML reflow, although it's not targeted at web developers and probably is a bit outdated).
This reflow process doesn't run synchronously after any change to the DOM, otherwise code like
elt.style.top = "5px";
elt.style.left = "15px";
would update the layout twice, which is inefficient.
On the other hand, asking for elements position/dimension (at least via .offsetTop) is supposed to force layout to return the correct information. This doesn't happen in your case for some reason and I'm not sure why.
Please create a simple testcase demonstrating the problem and file a bug in bugzilla.mozilla.org (CC me - ***********#gmail.com).
My guess is that this is related to XUL layout, which is less robust than HTML; you could try creating the cloud in an HTML doc in an iframe or at least in a <description> using createElementNS to create real HTML elements instead of xul:div you're creating with your current code.
Be sure the DOM is ready. In my case, even when using the getBoundingClientRect function on click events. The binding of the events needed to happen when the DOM is ready.