Skip to content

Vue does not work properly when setting the SVG style property in a lower version of the android browser #10248

Open
@tengmaoqing

Description

@tengmaoqing

Version

2.6.10

Reproduction link

https://codepen.io/anon/pen/XLyPJe

Steps to reproduce

environment:

  • qqBrowser 4.4
  • android 4.2.2
  • userAgent Mozilla/5.0 (Linux; U; Android 4.2.2; zh-cn; Coolpad 8297 Build/JDQ39) AppleWebKit/533.1 (KHTML, like Gecko)Version/4.0 MQQBrowser/4.4 Mobile Safari/533.1

What is expected?

render normally

What is actually happening?

alert
TypeError Cannot set property 'undefined' of null


if i remove style="stroke: #FFDA05;" on SVG, it will be ok

Activity

posva

posva commented on Jul 9, 2019

@posva
Member

Everything seems to work fine on Android 4.2 and 4.1 with Chrome. I have no way to test on qqBrowser.
Could you try by using :style.prop="'stroke: #FFDA05;'" instead?

added a commit that references this issue on Jul 9, 2019
96cdbce
tengmaoqing

tengmaoqing commented on Jul 10, 2019

@tengmaoqing
Author

Everything seems to work fine on Android 4.2 and 4.1 with Chrome. I have no way to test on qqBrowser.
Could you try by using :style.prop="'stroke: #FFDA05;'" instead?

If I using :style.prop="'stroke: #FFDA05;'" instead, it is working fine.
But,
this is because it is assigned like this by using the prop modifier.
image

In general, Vue is updating style through setProp.
image

In some Android browsers that don't support SVG, The style attribute of the Element generated by createElementNS is null.
image
(vnode.elm.style is null.)

There is also a problem with using v-show in this case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @posva@tengmaoqing

      Issue actions

        Vue does not work properly when setting the SVG style property in a lower version of the android browser · Issue #10248 · vuejs/vue