Weird bug indeed. Performing the transformation in wrapping `g` element as an SVG transform does not resolve the issue.

However, by performing a 3D rotation instead of of a 2D one, i.e. ` inlineCard.style.transform = &#39;rotate3d(0,0,1,&#39; + e.currentTarget.value + &#39;deg)&#39;;` does resolve the issue, you can see here.

https://jsfiddle.net/qe00s1mg/

[![enter image description here][1]][1]


  [1]: http://i.stack.imgur.com/EA8nD.png

In my PostgreSQL database I have 2 users: postgres and myuser.

The default user is postgres, but this user has no permission to query my foreign tables and myuser does. How can I check if I&#39;m connected with the right user?

If I&#39;m using the wrong user, how do I change to the right one?

How to check connected user on psql

How can I get the console to show in a fiddle on JSfiddle.com?

I recently saw a fiddle that had the console embedded in the fiddle, anyone know how this can be done?

How to get console inside jsfiddle

I&#39;ve just run into a very weird problem that only shows up in Safari 10. I have playing cards, svg images, that are sometimes rotated using `transform:rotate(xdeg)`.

The card I&#39;m using has a red block pattern. When it&#39;s not rotated, or rotated at right angles, i.e. 90, 180, 270, then it looks normal. But, any other angle than that and the background pattern turns blue! I just got a report about this from one of my users and have never seen anything as weird. Other browsers all work normally, Safari 9 does it normally.

I&#39;m guessing this is just a really weird bug in Safari 10, but any ideas about how to work around it? I&#39;ve created a minimal repro at:

https://jsfiddle.net/2zv4garu/1/



SVG changes color when rotated in Safari 10

I've just run into a very weird problem that only shows up in Safari 10. I have playing cards, svg images, that are sometimes rotated using <code>transform:rotate(xdeg)</code>.
The card I'm using has a red block pattern. When it's not rotated, or rotated at right angles, i.e. 90, 180, 270, then it looks normal. But, any other angle than that and the background pattern turns blue! I just got a report about this from one of my users and have never seen anything as weird. Other browsers all work normally, Safari 9 does it normally.
I'm guessing this is just a really weird bug in Safari 10, but any ideas about how to work around it? I've created a minimal repro at:
<a href="https://jsfiddle.net/2zv4garu/1/" target="_blank" rel="noopener noreferrer">https://jsfiddle.net/2zv4garu/1/</a>

Here&#39;s what I tried and how it goes wrong.

This works:

    &lt;div dangerouslySetInnerHTML={{ __html: &quot;&lt;h1&gt;Hi there!&lt;/h1&gt;&quot; }} /&gt;

This doesn&#39;t:

    &lt;div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /&gt;

---

The description property is just a normal string of HTML content. However it&#39;s rendered as a string, not as HTML for some reason.

[![enter image description here][1]][1]

Any suggestions?


  [1]: http://i.stack.imgur.com/cI25q.png

Render HTML string as real HTML in a React component

Is this possible? Everything I&#39;m google leads me to converting markdown to PDF. But I want to display a PDF image in a markdown file. This is my example:

    ![hustlin_erd](erd.pdf)

If i use a regular image, it works just fine. Also I&#39;m aware of converting PDF to image.

Display pdf image in markdown

Is it possible to make a flex element ignore a child element so it&#39;s size does not affect the other elements?

For example, I have a wrapper with `display: flex`. It has a header, content, and footer.

    &lt;div class=&quot;wrapper&quot;&gt;
        &lt;header&gt;&lt;/header&gt;
        &lt;article&gt;&lt;/article&gt;
        &lt;footer&gt;&lt;/footer&gt;
    &lt;/div&gt;

I want the wrapper to ignore the header tag (the header will be fixed to the top of the window). The article will be set to `flex: 1` so it takes up the rest of the space, forcing the footer to the bottom of the page. Here is some sample CSS:

    .wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-top: 50px; /* Accounts for header */
    }
    
    header {
        height: 50px;
        position: fixed;
        top: 0;
        width: 100%;
    }
    
    article {
        flex: 1;
    }
    
    footer {
        height: 50px;
    }

I know I could just move the header outside of the wrapper but I have a lot of existing code that will make that a bit more difficult. Is what I am asking even possible?

Make flex element ignore child element

On my project I wanted to add a text on my existing toggle code.So I wanted like this, When toggles ON it should display the text &quot;ON&quot; and display the &quot;OFF&quot; text if toggles off. I can&#39;t change it to other toggle because it&#39;s already have a backend using it. I just wanted only to input &quot;ON&quot; and &quot;OFF&quot; text. Thank you.

Here is my code 

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

      .switch input {
      display: none;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ca2222;
      -webkit-transition: .4s;
      transition: .4s;
    }

    .slider:before {
      position: absolute;
      content: &quot;&quot;;
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }

    input:checked+.slider {
      background-color: #2ab934;
    }

    input:focus+.slider {
      box-shadow: 0 0 1px #2196F3;
    }

    input:checked+.slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }


    /* Rounded sliders */

    .slider.round {
      border-radius: 34px;
    }

    .slider.round:before {
      border-radius: 50%;

&lt;!-- language: lang-html --&gt;

    &lt;label class=&quot;switch&quot;&gt;&lt;input type=&quot;checkbox&quot; id=&quot;togBtn&quot;&gt;&lt;div class=&quot;slider round&quot;&gt;&lt;/span&gt;&lt;/div&gt;&lt;/label&gt;

&lt;!-- end snippet --&gt;



How to add the text &quot;ON&quot; and &quot;OFF&quot; to toggle button

How can I manually trigger a click event in **ReactJS**?
When a user clicks on element1, I want to automatically trigger a click on the `input` tag.

    


&lt;!-- language: lang-html --&gt;

    &lt;div className=&quot;div-margins logoContainer&quot;&gt;
      &lt;div id=&quot;element1&quot; className=&quot;content&quot; onClick={this.uploadLogoIcon}&gt;
        &lt;div className=&quot;logoBlank&quot; /&gt;
      &lt;/div&gt;
      &lt;input accept=&quot;image/*&quot; type=&quot;file&quot; className=&quot;hide&quot;/&gt;
    &lt;/div&gt;




How to manually trigger click event in ReactJS?

if I use `-webkit-overflow-scrolling` for a scrolling div, it scrolls perfectly with native momentum. But, div itself sometimes freezes and does not respond my finger moves. After 2-3 seconds later, it becomes again scrollable. 

I don&#39;t know how I am reproducing this problem. But, as I see there are two main behavior creates this situation. 

First, If I wait for a while, for instance, 20 seconds, and touch the div, it does not respond. I wait a couple of seconds, and it becomes working again.

Second, I touch several times quickly, and then, it becomes freezing, and again, after a couple of seconds later, it starts working again.

How can I prevent this freezing?

Div scrolling freezes sometimes if I use -webkit-overflow-scrolling

I&#39;m currently using CSS Modules with React for my styling. So each of my components is importing in it&#39;s component specific css file, like so:

    import React from &#39;react&#39;;
    import styles from &#39;./App.css&#39;;
    
    const example = () =&gt; (
      &lt;div className={styles.content}&gt;
        Hello World!
      &lt;/div&gt;
    );
    
    export default example;

This works fine when styling individual components, but how do I apply global styling (html, body, header tags, divs, etc.) that isn&#39;t component specific? 



How to apply global styles with CSS modules in a react app?

[Apple&#39;s recommendation][1]:

&gt; In apps that run in iOS 8 and later, use the WKWebView class instead of using UIWebView.

Thus, I have replaced my good old `UIWebView` with a shiny new `WKWebView`. But what I thought to be an easy exercise (simply swapping the classes and replacing the delegate methods) turned out to be a real mess.

# The Problem

When I load an HTML string using

    loadHTMLString(String, baseURL: URL?)

the web view loads and renders the pure HTML but **it doesn&#39;t load any images or CSS files referenced inside the `htmlString`**.

This happens **only on a real device**!&lt;br /&gt;
In Simultor all referenced resources are loaded correctly.

[![Simulator][2]][2]
[![Real Device][3]][3]

### *Example*

I have defined a simple `htmlString` in my view controller class:

    let imageName = &quot;image.png&quot;
    
    let libraryURL: URL // The default Library URL

    var htmlString: String {
        return &quot;&lt;html&gt; ... &lt;img src=\&quot;\(imageName)\&quot; /&gt; ... &lt;/html&gt;&quot;
        // &quot;...&quot; represents more valid HTML code incl. header and body tags
    }

The image is stored in the root Library folder so its URL is:

    let imageURL = libraryURL.appendingPathComponent(imageName)

Now I load the `htmlString` into the web view:

    webView.loadHTMLString(htmlString, baseURL: libraryURL)

and it doesn&#39;t load the image even though the `baseURL` is set correctly.

# Ideas for a Solution

1. Maybe `WKWebView` has a problem with resolving relative paths so my first idea was to use **absolute paths** inside the HTML string instead.&lt;br /&gt;
    → ❌ Doesn&#39;t work.

2. Two answers to [another SO post][4] suggested that using&lt;br /&gt;
    `loadFileURL(URL, allowingReadAccessTo: URL)`&lt;br /&gt;
   instead of `loadHTMLString(...)` works in iOS 9+.&lt;br /&gt;
   → ✅ That works.

However, I cannot use solution 2 because my HTML files are encrypted and the decrypted files must not be stored on the disk.

# Question

Is there any way to load local resources like images and styles using the `WKWebView`&#39;s

    loadHTMLString(String, baseURL: URL?)

function? Or is still a bug in iOS 9+?

*(I just cannot believe that Apple provides and recommends using a web view that cannot load any local web content from inside an HTML string?!)*


  [1]: https://developer.apple.com/reference/uikit/uiwebview#overview
  [2]: http://i.stack.imgur.com/2f84l.png
  [3]: http://i.stack.imgur.com/bDCwA.png
  [4]: https://stackoverflow.com/questions/24882834/wkwebview-not-loading-local-files-under-ios-8

WKWebView fails to load images and CSS using loadHTMLString(_, baseURL:)

I&#39;m trying to load an external svg file and then write additional SVG elements on top of it. When I do, I get the following  error

&gt; Failed to execute &#39;appendChild&#39; on &#39;Node&#39;: Only one element on document allowed

when I inspect within Chrome.

Here&#39;s the HTML:

    &lt;html&gt;
      &lt;head&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/index.css&quot;&gt;
        &lt;title&gt;Hello World&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; id=&quot;mySvg&quot;&gt;
            &lt;circle cx=&quot;40&quot; cy=&quot;30&quot; r=&quot;15&quot; fill=&quot;#FF00FF&quot;
              stroke=&quot;#000000&quot; stroke-width=&quot;2&quot; /&gt;
          &lt;/svg&gt;
          &lt;object data=&quot;img/drawing.svg&quot; type=&quot;image/svg+xml&quot;
            align=&quot;center&quot; id=&quot;svgDrw&quot; height=&quot;80vh&quot;&gt;&lt;/object&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;js/problem.js&quot;&gt;&lt;/script&gt;
      &lt;/body&gt;
    &lt;/html&gt;

Here&#39;s problem.js:

    var svgXtraDoc;
    var d = document.getElementById(&quot;svgDrw&quot;);
    
    d.addEventListener(&quot;load&quot;,function(){
    
      // get the inner DOM 
      svgXtraDoc = d.contentDocument;
      // get the inner element by id
      svgRect1 = svgXtraDoc.getElementById(&quot;MyRect1&quot;);
      svgRect2 = svgXtraDoc.getElementById(&quot;MyRect2&quot;);
    }, false);
    
    
    function addRect() {
      var svgRect = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, 
        &quot;rect&quot;);
      svgRect.setAttribute(&quot;x&quot;, 100);
      svgRect.setAttribute(&quot;y&quot;, 100);
      svgRect.setAttribute(&quot;width&quot;, 100);
      svgRect.setAttribute(&quot;height&quot;, 100);
      svgRect.style.fill = &quot;red&quot;;
      // mySvg.appendChild(svgRect);
      svgXtraDoc.appendChild(svgRect);
    }
    
    document.getElementById(&quot;mySvg&quot;).addEventListener(&quot;click&quot;, addRect);

... and here&#39;s drawing.svg, stripped of some of the Inkscapy cruft:

    &lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot; standalone=&quot;no&quot;?&gt;
    &lt;!-- Created with Inkscape (http://www.inkscape.org/) --&gt;
    
    &lt;svg
       xmlns:dc=&quot;http://purl.org/dc/elements/1.1/&quot;
       xmlns:cc=&quot;http://creativecommons.org/ns#&quot;
       xmlns:rdf=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot;
       xmlns:svg=&quot;http://www.w3.org/2000/svg&quot;
       xmlns=&quot;http://www.w3.org/2000/svg&quot;
       width=&quot;29.02857mm&quot;
       height=&quot;37.092064mm&quot;
       viewBox=&quot;0 0 102.85714 131.42857&quot;
       id=&quot;svg2&quot;
       version=&quot;1.1&quot;&gt;
      &lt;g
         id=&quot;layer1&quot;
         transform=&quot;translate(-205.71428,-218.07649)&quot;&gt;
        &lt;rect
           style=&quot;stroke:none;fill-opacity:1;fill:#5eb056&quot;
           id=&quot;MyRect1&quot;
           width=&quot;102.85714&quot;
           height=&quot;131.42857&quot;
           x=&quot;205.71428&quot;
           y=&quot;218.07649&quot; /&gt;
        &lt;rect
           style=&quot;fill:#000000;stroke:none;fill-opacity:1&quot;
           id=&quot;MyRect2&quot;
           width=&quot;42.857143&quot;
           height=&quot;65.714287&quot;
           x=&quot;231.42857&quot;
           y=&quot;252.3622&quot; /&gt;
      &lt;/g&gt;
    &lt;/svg&gt;


The error arises when you click on the circle: the rectangle that should appear within the two-rectangle imported drawing doesn&#39;t appear, and the error message &quot;Failed to execute &#39;appendChild&#39; on &#39;Node&#39;: Only one element on document allowed.&quot; is displayed in the console.

If I change this so the rectangle is added to the svg containing the circle, i.e. by uncommenting the line &quot;// mySvg.appendChild(svgRect);&quot;, then the rectangle successfully appears.

I also know that the drawing file is successfully loading, because in other code (not included here for brevity reasons) I can change the colors of the rectangles within that file. So it seems that I can access existing elements within the file but not add elements.

Is there something about externally loaded SVGs versus inline SVGs that I&#39;m not taking into account?

One last thing -- this is going into a Cordova app so I&#39;d like to keep it small, so pure JavaScript solutions are preferred. I&#39;ll use JQuery or SnapSVG if I have to but it seems my needs are sufficiently simple that it should be possible to do this without external libraries.

Failed to execute &#39;appendChild&#39; on &#39;Node&#39;: Only one element on document allowed

I have an vector drawable I imported from an SVG asset. Sometimes, I have to adjust the size. Usually I update width and height. What I can&#39;t work out is how viewportwidth and height also impact the svg. It seems changing these dimensions can push the svg out of view within the visible area. 

What do these units of measurement represent ? What is it&#39;s relationship with width and height respectively ? The [documentation from Google][1] is, (as usual), woefully inadequate. Could someone please elaborate ?


  [1]: https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

What is the impact of viewportwidth/height on Android drawables

I have seen a lot of libraries for svg on react but none gave me how to import an svg file in the react component. I have seen code which talk about bring the svg code into react rather than using the .svg icon as image and show it in the UI.

Please let me know if there are ways to embed the icon. 

How to display svg icons(.svg files) in UI using React Component?

[![enter image description here][1]][1]


[![enter image description here][2]][2]


  [1]: https://i.stack.imgur.com/1YGxo.png
  [2]: https://i.stack.imgur.com/0VGO5.png
I want to save SVG as file from this page https://www.lightningdesignsystem.com/icons/
 Is there any Chrome extension or other way to do this?

How to extract svg as file from web page

In vue single file component.I import a svg file like this:
`import A from &#39;a.svg&#39;` 
And then how can I use A in my component?

How can I import a svg file to a Vue component?

I am developing websites and creating applications. I want to know how to inspect an element through web browsers like safari. 

In normal Chrome, Firefox, Explorer or any other browsers, we will right click the mouse button or press Function Key `F12` to view the `Inspect Element`. But it is not happening in the case of safari browser.

Share your thoughts! 

How to Inspect Element using Safari Browser

I&#39;m creating an `Ionic` app using `es6 modules`, `TypeScript` and `SystemJS` as a module loader. This is my setup:

**tsconfig.json:**

```json
{
  &quot;compilerOptions&quot;: {
    ...
    &quot;target&quot;: &quot;es5&quot;,
    &quot;module&quot;: &quot;system&quot;,
    ...
  }
}
```

**index.html:**

```html
&lt;script src=&quot;lib/system.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;systemjs.config.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;System.import(&#39;js/app.js&#39;)&lt;/script&gt;
```

**example script (TypeScript):**

```typescript
import {IConfig} from &quot;./app-config&quot;;
    
export class ConfigLoader {
    ...
}
```

Everything runs great in Chrome. However, when debugging using Safari&#39;s Web Inspector, I cannot place any breakpoints in the scripts because Web Inspector only shows scripts that are loaded directly from the HTML (through script tags), and not scripts loaded by XHR (in my case, by SystemJS). This means I cannot debug my own scripts, which is of course unacceptable.

I tried to work around this by using SystemJS like before, but also placing the script tags in the html, like so:

```html
&lt;script src=&quot;lib/system.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;systemjs.config.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/app-config.js&quot;&gt;&lt;/script&gt;
 ... other app scripts
&lt;script&gt;System.import(&#39;js/app.js&#39;)&lt;/script&gt;
```

However, this doesn&#39;t work, as SystemJS does not seem happy about this:

&gt; Invalid System.register call. Anonymous System.register calls can only
&gt; be made by modules loaded by SystemJS.import and not via script tags.

How do I use SystemJS and at the same time have the ability to debug in Safari? I&#39;m looking for a solution a little more sophisticated than &#39;put a debugger statement in each script&#39;...

Debugging in Safari&#39;s Web Inspector, when using a module loader like SystemJS

Similar to &quot;https://stackoverflow.com/questions/25207077/how-to-detect-if-os-x-is-in-dark-mode&quot; only for browsers.

Has anyone found if there is a way to detect if the user&#39;s system is in the new OS X Dark Mode in Safari/Chrome/Firefox?

We would like to change our site&#39;s design to be dark-mode friendly based on the current operating mode.

How to detect if the OS is in dark mode in browsers?

In my Javascript code, this regex `/(?&lt;=\/)([^#]+)(?=#*)/` works fine in Chrome, but in safari, I get: 

&gt; Invalid regular expression: invalid group specifier name

Any ideas?

Content Type	Original Author	Original Content on Stackoverflow
Question	Einar Egilsson	View Question on Stackoverflow
Solution 1 - Html	methodofaction	View Answer on Stackoverflow

SVG changes color when rotated in Safari 10

Html Problem Overview

Html Solutions

Solution 1 - Html

How to get console inside jsfiddle

How to check connected user on psql

Attributions