Kivy Bubble arrow blur

Question

I created a Bubble widget around a custom widget to display some options, but the arrow of that Bubble turned out unexpectedly big and blurry. All those widgets are positioned in a GridLayout that is put inside of a ScrollView. What could cause this issue?

Here is the code:

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen
from kivy.uix.widget import Widget
from kivy.uix.button import Button
from kivy.uix.scrollview import ScrollView
from kivy.uix.gridlayout import GridLayout
from kivy.uix.bubble import Bubble
from kivy.properties import ListProperty

Builder.load_string('''
<PopupBubble>:
    size_hint: None, None

<ScrollView>:
    canvas:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

<Message>:
    width: 500
    BoxLayout:
        pos: root.pos
        height: self.height
        canvas:
            Color:
                rgba: 0.8, 0.8, 0.8, 1
            RoundedRectangle:
                pos: root.pos
                size: self.size

        TextInput:
            pos: root.pos
            size: root.size
            id: msg
            background_color: 0, 0, 0, 0
            cursor_color: 0, 0, 0, 0

    PopupBubble:
        pos: root.x, self.height + root.y + root.height
        size: 100, 40
''')

class Message(Widget):
    bg_color = ListProperty([0.99, 0.99, 0.99, 1])

class PopupBubble(Bubble):
    pass

class Chat(Screen):
    pass

class TestApp(App):
    def msg_in(self):
        msg_stack = self.msg_stack
        msg = "test"
        msg_stack.append(Message())

        msg_stack[-1].ids['msg'].text = msg
        msg_stack[-1].width = 160
        msg_stack[-1].height = (len(msg_stack[-1].ids['msg']._lines_labels) + 1) * (msg_stack[-1].ids['msg'].line_height + 5)
        for i in msg_stack[-1].walk():
            i.height = msg_stack[-1].height
            i.width = msg_stack[-1].width
        self.msg_layout.add_widget(msg_stack[-1])

    def build(self):
        self.msg_stack = []
        self.chat = Chat()
        self.sv1_main = ScrollView(pos_hint = {"top":1, "center_x":0.5},
                                   size_hint = (0.97, 0.65))

        self.msg_layout = GridLayout(height = 10,
                                     cols = 1,
                                     padding = 10,
                                     spacing = 10,
                                     size_hint_y = None)
        self.chat.add_widget(self.sv1_main)
        self.sv1_main.add_widget(self.msg_layout)
        for i in range(15):
            self.msg_layout.add_widget(Widget())
            # Just to bring the next widget down

        self.msg_in()
        return self.chat

TestApp().run()

Answer 1

Your line msg_stack[-1].width = 160 cripples it. Or rather the loop after it, where you set Bubble's width from that variable.

You set Bubble's size in kv, then in python you play its width again as you add Message as a widget to GridLayout and the result is clearly visible. Set its size once, in kv or in python and/or try to set one property only. Otherwise it works as expected:

from kivy.lang import Builder
from kivy.base import runTouchApp
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.bubble import Bubble, BubbleButton
Builder.load_string('''
<Test>:
    Button:
        on_release: root.show_bubble()
    FloatLayout:
        id: box
''')
class Test(BoxLayout):
    def show_bubble(self):
        bubble = Bubble(size_hint=[None,None],size=[100,40],pos=[100,300])
        bubble.add_widget(BubbleButton(text='Copy', size=[30,10]))
        bubble.add_widget(BubbleButton(text='Paste'))
        self.ids.box.add_widget(bubble)
runTouchApp(Test())